import { defineComponent, computed } from 'vue'
import { clsName } from './util'
import { COMPS_NAME } from './util/constant'
import { getValByUnit } from 'amtf/utils'

export default defineComponent({
  name: COMPS_NAME.VE_LOADING_PLANE,
  props: {
    color: {
      type: String,
      required: true,
    },
    width: {
      type: [Number, String],
      required: true,
    },
    height: {
      type: [Number, String],
      required: true,
    },
  },
  setup(props) {
    // 计算 spin 风格
    const spinStyle = computed(() => {
      const { color, width, height } = props

      return {
        width: getValByUnit(width),
        height: getValByUnit(height),
        'background-color': color,
      }
    })

    // 返回渲染函数
    return () => <div style={spinStyle.value} class={clsName('plane')} />
  },
})
